<template>
    <div class="dpa-header">
        <!--logo-->
        <div class="logo"> <img :src="logo || Logo" /> </div>
        <!--标题-->
        <div class="placeholder"></div>
        <div class="title" :style="titleStyle.style" v-if="titleStyle.show">
            {{ titleStyle.title }}
        </div>
        <div class="config">
            <!--用户-->
            <div class="userinfo">
                <user-info popup-ccontiner="'body'">
                    <template #prefixIcon> <img :src="userImg" class="prefix-icon" alt="" /> </template>
                </user-info>
            </div>
            <!--时间-->
            <div class="time"> <img :src="systemTimeImg" class="system-time-icon" alt="" /> {{ time }} </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { defineComponent, ref } from 'vue'
    import Logo from '@/assets/logo.png'
    import UserInfo from '@/layouts/components/UserInfo.vue'
    import userImg from '@/assets/images/user.png'
    import systemTimeImg from '@/assets/images/system-time.png'
    import { getStorageByKey } from '@/utils/common'
    import dayjs from 'dayjs'
    import { CURRENT_TIME } from '@/enums/cacheEnum'

    export default defineComponent({
        name: 'DpaHeader',
        components: {
            UserInfo
        },
        props: {
            titleStyle: {
                type: Object,
                default: () => {}
            },
            logo: {
                type: String
            }
        },
        setup() {
            const time = ref('')
            time.value = getStorageByKey(CURRENT_TIME) || dayjs().format('YYYY.MM.DD')
            return {
                time,
                Logo,
                userImg,
                systemTimeImg
            }
        }
    })
</script>

<style lang="less" scoped>
    .dpa-header {
        display: flex;
        align-items: center;
        position: relative;

        .logo {
            padding-right: 16px;

            img {
                height: 38px;
            }
        }

        .placeholder {
            flex: 1;
        }

        .title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-family: PingFangSC-Medium;
            font-size: 24px;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;
            line-height: 32px;
        }

        .config {
            display: flex;
            color: #fff;
            font-size: 14px;

            .userinfo {
                margin-right: 32px;

                .user-name {
                    display: flex;
                    align-items: center;

                    .prefix-icon {
                        margin-right: 8px;
                    }

                    :deep(.ml10) {
                        margin-left: 2px;
                    }
                }

                :deep(.@{ant-prefix}-dropdown) {
                    .@{ant-prefix}-dropdown-menu {
                        background: #ffffff;
                        border: 1px solid #40a9ff;
                        border-radius: 4px;
                    }
                }
            }

            .time {
                display: flex;
                align-items: center;

                .system-time-icon {
                    margin-right: 8px;
                }
            }
        }
    }
</style>
